<template>
  <div
    class="progress_bar"
    :style="{
      width: width + unit,
      height: height + unit,
      backgroundColor: maxBg,
      borderRadius: borderRadius,
    }"
  >
    <div
      class="progress_value"
      :class="{ progress_value_right: direction === 'right' }"
      :style="{
        width: (value / maxValue) * width + unit,
        background: valueBg,
        borderRadius: borderRadius,
        direction,
      }"
    >
      <span v-if="showValue">{{ value }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "progressBar",
  props: {
    //最大值
    maxValue: {
      type: [String, Number],
      required: true,
    },
    //进度值
    value: {
      type: [String, Number],
      required: true,
    },
    //宽度
    width: {
      type: Number,
      required: true,
    },
    //高度
    height: {
      type: Number,
      required: true,
    },
    //宽高单位
    unit: {
      type: String,
      default: "px",
    },
    //整体背景色
    maxBg: {
      type: String,
      default: "#032665",
    },
    //进度背景色
    valueBg: {
      type: String,
      required: true,
    },
    //圆角值
    borderRadius: String,
    //是否显示值
    showValue: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "left",
    },
  },
};
</script>

<style scoped lang="scss">
.progress_bar {
  position: relative;
  overflow: hidden;
  > .progress_value {
    height: 100%;
    position: absolute;
    left: 0;
    animation: aniWidth 1s ease-out;
    overflow: hidden;
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: white;
      opacity: 0;
      animation: aniInfinite2 infinite 2s linear;
    }
    > span {
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
    }
  }
  > .progress_value_right {
    left: auto;
    right: 0;
    &::before {
      animation: aniInfinite infinite 2s linear;
    }
  }
}
@keyframes aniWidth {
  from {
    width: 0;
  }
  to {
  }
}
@keyframes aniInfinite {
  from {
    transform: translateX(100%);
    opacity: 0.7;
  }
}
@keyframes aniInfinite2 {
  from {
    transform: translateX(-100%);
    opacity: 0.7;
  }
}
</style>